<template>
  <view class="container">
    <u-navbar title="阅读分析" :border-bottom="true" back-icon-color="#303133"></u-navbar>
    
    <view class="content" v-if="!loading">
      <!-- 基本统计信息 -->
      <view class="stats-section">
        <view class="stats-item">
          <text class="stats-value">{{ analysisData.totalViews || 0 }}</text>
          <text class="stats-label">阅读文章数</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ formatReadTime(analysisData.timeAnalysis?.totalReadTime) }}</text>
          <text class="stats-label">总阅读时长</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ formatReadTime(analysisData.timeAnalysis?.avgReadTime) }}</text>
          <text class="stats-label">平均阅读时长</text>
        </view>
      </view>
      
      <!-- 喜好标签 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">喜好标签</text>
        </view>
        <view class="tags-container" v-if="analysisData.favoriteTags && analysisData.favoriteTags.length > 0">
          <u-tag 
            v-for="(tag, index) in analysisData.favoriteTags.slice(0, 10)" 
            :key="index"
            :text="tag.name + ' (' + tag.count + ')'"
            :type="getTagType(index)"
            plain
            size="mini"
            class="tag-item">
          </u-tag>
        </view>
        <view v-else class="empty-data">暂无数据</view>
      </view>
      
      <!-- 喜好分类 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">喜好分类</text>
        </view>
        <view class="categories-container" v-if="analysisData.favoriteCategories && analysisData.favoriteCategories.length > 0">
          <view 
            v-for="(category, index) in analysisData.favoriteCategories" 
            :key="index"
            class="category-item">
            <view class="category-name">{{ category.name }}</view>
            <view class="category-progress">
              <u-line-progress 
                :percentage="getCategoryPercentage(category)" 
                :active-color="getCategoryColor(index)"
                height="10">
              </u-line-progress>
            </view>
            <view class="category-count">{{ category.count }}篇</view>
          </view>
        </view>
        <view v-else class="empty-data">暂无数据</view>
      </view>
      
      <!-- 个性化推荐 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">个性化推荐</text>
        </view>
        <view v-if="analysisData.recommendations && analysisData.recommendations.length > 0">
          <view 
            v-for="(article, index) in analysisData.recommendations.slice(0, 5)" 
            :key="index"
            class="recommendation-item"
            @click="navigateToDetail(article)">
            <image :src="article.cover" mode="aspectFill" class="recommendation-image"></image>
            <view class="recommendation-content">
              <text class="recommendation-title u-line-2">{{ article.title }}</text>
              <text class="recommendation-category">{{ article.categoryName }}</text>
            </view>
          </view>
        </view>
        <view v-else class="empty-data">暂无数据</view>
      </view>
    </view>
    
    <view v-else class="loading-container">
      <u-loading mode="circle" size="50"></u-loading>
    </view>
  </view>
</template>

<script>
import { getUserBrowsingAnalysisApi } from '@/api/recommendation'

export default {
  data() {
    return {
      loading: true,
      analysisData: {
        totalViews: 0,
        favoriteTags: [],
        favoriteCategories: [],
        timeAnalysis: {
          totalReadTime: 0,
          avgReadTime: 0,
          maxReadTime: 0
        },
        viewTrends: [],
        recommendations: []
      }
    }
  },
  onLoad() {
    this.getAnalysisData()
  },
  methods: {
    async getAnalysisData() {
      this.loading = true
      try {
        const res = await getUserBrowsingAnalysisApi()
        if (res.code === 200) {
          this.analysisData = res.data
        }
      } catch (error) {
        console.error('获取浏览分析数据失败:', error)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    formatReadTime(minutes) {
      if (!minutes) return '0分钟'
      if (minutes < 60) return minutes + '分钟'
      
      const hours = Math.floor(minutes / 60)
      const remainingMinutes = minutes % 60
      
      return hours + '小时' + (remainingMinutes > 0 ? remainingMinutes + '分钟' : '')
    },
    
    getTagType(index) {
      const types = ['primary', 'success', 'warning', 'error', 'info']
      return types[index % types.length]
    },
    
    getCategoryPercentage(category) {
      if (!this.analysisData.favoriteCategories || this.analysisData.favoriteCategories.length === 0) {
        return 0
      }
      
      const maxCount = Math.max(...this.analysisData.favoriteCategories.map(c => c.count))
      return maxCount > 0 ? (category.count / maxCount * 100) : 0
    },
    
    getCategoryColor(index) {
      const colors = ['#2979ff', '#19be6b', '#ff9900', '#fa3534', '#909399']
      return colors[index % colors.length]
    },
    
    navigateToDetail(article) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${article.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f6fa;
  padding-bottom: 30rpx;
}

.content {
  padding: 20rpx;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  
  .stats-item {
    text-align: center;
    
    .stats-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #2979ff;
      display: block;
    }
    
    .stats-label {
      font-size: 24rpx;
      color: #606266;
      margin-top: 10rpx;
      display: block;
    }
  }
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  
  .section-header {
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #303133;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background-color: #2979ff;
        border-radius: 3rpx;
      }
    }
  }
  
  .tags-container {
    display: flex;
    flex-wrap: wrap;
    
    .tag-item {
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }
  }
  
  .categories-container {
    .category-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .category-name {
        width: 120rpx;
        font-size: 24rpx;
        color: #303133;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .category-progress {
        flex: 1;
        margin: 0 20rpx;
      }
      
      .category-count {
        width: 80rpx;
        text-align: right;
        font-size: 24rpx;
        color: #909399;
      }
    }
  }
  
  .recommendation-item {
    display: flex;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #ebeef5;
    
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    
    .recommendation-image {
      width: 160rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .recommendation-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .recommendation-title {
        font-size: 28rpx;
        color: #303133;
        line-height: 1.4;
      }
      
      .recommendation-category {
        font-size: 24rpx;
        color: #2979ff;
        background-color: rgba(41, 121, 255, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
        align-self: flex-start;
      }
    }
  }
  
  .empty-data {
    text-align: center;
    color: #909399;
    padding: 30rpx 0;
    font-size: 26rpx;
  }
}
</style> 